<template>
  <view class="about-container">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="nav-title">关于我们</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 顶部背景图 -->
    <view class="banner">
      <image src="http://121.36.197.175:19000/test/farm-banner.jpg" mode="aspectFill" class="banner-image"></image>
      <view class="banner-overlay">
        <view class="banner-text">智慧农场</view>
      </view>
    </view>
    
    <view class="content">
      <view class="card">
        <view class="card-title">
          <view class="title-icon"></view>
          <text>平台简介</text>
        </view>
        <view class="description">
          此平台为智慧农业解决方案，致力于通过数字化技术提升农业生产效率，打造可持续发展的现代农业生态系统。联系下方微信了解更多详情。
        </view>
      </view>
      
      <view class="farm-image">
        <image src="http://121.36.197.175:19000/test/farm-image.png" mode="widthFix" class="farm-img"></image>
      </view>
      
      <view class="features-card">
        <view class="feature-title">核心功能</view>
        
        <view class="feature-grid">
          <view class="feature-item" v-for="(item, index) in features" :key="index">
            <view class="feature-icon-wrapper">
              <image :src="item.icon" mode="aspectFit" class="feature-icon"></image>
            </view>
            <text class="feature-name">{{item.name}}</text>
          </view>
        </view>
      </view>
      
      <view class="contact-card">
        <view class="contact-title">联系我们</view>
        <view class="contact-info">
          <view class="contact-item">
            <u-icon name="map" size="24" color="#4CAF50"></u-icon>
            <text>中国·深圳·南山区科技园</text>
          </view>
          <view class="contact-item">
            <u-icon name="phone" size="24" color="#4CAF50"></u-icon>
            <text>400-888-8888</text>
          </view>
          <view class="contact-item">
            <u-icon name="email" size="24" color="#4CAF50"></u-icon>
            <text>contact@smartfarm.com</text>
          </view>
        </view>
      </view>
      
      <view class="footer">
        <view class="year">2025</view>
        <view class="slogan">数字农业创新发展</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      features: [
        { 
          name: '认租私家菜园', 
          icon: 'http://121.36.197.175:19000/test/garden-icon.png'
        },
        { 
          name: '托管自我管理', 
          icon: 'http://121.36.197.175:19000/test/management-icon.png'
        },
        { 
          name: '商城自产自销', 
          icon: 'http://121.36.197.175:19000/test/shop-icon.png'
        },
        { 
          name: '主题活动', 
          icon: 'http://121.36.197.175:19000/test/activity-icon.png'
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style>
.about-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.nav-header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
}

.nav-back {
  width: 60rpx;
  display: flex;
  align-items: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.nav-right {
  width: 60rpx;
}

.banner {
  position: relative;
  height: 300rpx;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text {
  color: #ffffff;
  font-size: 48rpx;
  font-weight: bold;
  letter-spacing: 4rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.content {
  padding: 30rpx;
}

.card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.card-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.title-icon {
  width: 8rpx;
  height: 32rpx;
  background-color: #4CAF50;
  margin-right: 16rpx;
  border-radius: 4rpx;
}

.card-title text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  text-align: justify;
}

.farm-image {
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.farm-img {
  width: 100%;
  display: block;
}

.features-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.feature-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
  position: relative;
}

.feature-title::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #4CAF50;
}

.feature-grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  margin-bottom: 20rpx;
}

.feature-icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  background-color: #E8F5E9;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}

.feature-icon {
  width: 60rpx;
  height: 60rpx;
}

.feature-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.contact-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.contact-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
  position: relative;
}

.contact-title::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #4CAF50;
}

.contact-info {
  padding: 10rpx 0;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.contact-item u-icon {
  margin-right: 16rpx;
}

.contact-item text {
  font-size: 28rpx;
  color: #666;
}

.footer {
  text-align: center;
  margin-top: 60rpx;
  padding-bottom: 40rpx;
}

.year {
  font-size: 40rpx;
  color: #4CAF50;
  font-weight: bold;
}

.slogan {
  font-size: 32rpx;
  color: #4CAF50;
  font-weight: bold;
  margin-top: 10rpx;
}
</style> 